<template>
  <div class="login-container flex">
    <div class="login-left">
      <div class="login-left-logo">
        <img :src="logoMini" />
        <div class="login-left-logo-text">
          <span>{{ $t('message.label.title') }}</span>
          <span class="login-left-logo-text-msg">{{ getThemeConfig.globalViceTitleMsg }}</span>
        </div>
      </div>
    </div>
    <div class="login-right flex">
      <div class="login-right-warp flex-margin">
        <span class="login-right-warp-one"></span>
        <span class="login-right-warp-two"></span>
        <div class="login-right-warp-mian">
          <div class="login-right-warp-main-title">{{ $t('message.label.title') }} 欢迎您！</div>
          <div class="login-right-warp-main-form">
            <div v-if="!state.isScan">
              <el-tabs v-model="state.tabsActiveName">
                <el-tab-pane :label="$t('message.label.one1')" name="account">
                  <Account />
                </el-tab-pane>
                <el-tab-pane :label="$t('message.label.two2')" name="mobile">
                  <Mobile />
                </el-tab-pane>
              </el-tabs>
            </div>
            <!-- <Scan v-if="state.isScan" /> -->
            <!-- <div class="login-content-main-sacn" @click="state.isScan = !state.isScan">
              <i class="iconfont" :class="state.isScan ? 'icon-diannao1' : 'icon-barcode-qr'"></i>
              <div class="login-content-main-sacn-delta"></div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="login">
    <vue-particles
      id="tsparticles"
      :particlesInit="particlesInit"
      :particlesLoaded="particlesLoaded"
      :options="options"
    />
  </div>
</template>

<script setup lang="ts" name="loginIndex">
import { defineAsyncComponent, onMounted, reactive, computed, ref } from "vue"
import { storeToRefs } from "pinia"
import { useThemeConfig } from "@/stores/themeConfig"
import { NextLoading } from "@/utils/loading"
import { loadSlim } from "tsparticles-slim"
import logoMini from "@/assets/logo-mini.svg"

// 引入组件
const Account = defineAsyncComponent(() => import("@/views/login/component/account.vue"))
const Mobile = defineAsyncComponent(() => import("@/views/login/component/mobile.vue"))
const Scan = defineAsyncComponent(() => import("@/views/login/component/scan.vue"))

// 定义变量内容
const storesThemeConfig = useThemeConfig()
const { themeConfig } = storeToRefs(storesThemeConfig)
const state = reactive({
    tabsActiveName: "account",
    isScan: false,
})

// 获取布局配置信息
const getThemeConfig = computed(() => {
    return themeConfig.value
})
// 页面加载时
onMounted(() => {
    NextLoading.done()
})
// 粒子参数
const options = ref({
    background: {
        color: {
            value: "#0d47a1",
        },
    },
    fpsLimit: 120,
    interactivity: {
        events: {
            onClick: {
                enable: true,
                mode: "push",
            },
            onHover: {
                enable: true,
                mode: "grab",
            },
            resize: true,
        },
        modes: {
            bubble: {
                distance: 400,
                duration: 2,
                opacity: 0.8,
                size: 20,
            },
            push: {
                quantity: 8,
            },
            repulse: {
                distance: 200,
                duration: 0.4,
            },
        },
    },
    particles: {
        color: {
            value: "#ffffff",
        },
        links: {
            color: "#ffffff",
            distance: 150,
            enable: true,
            opacity: 0.5,
            width: 1,
        },
        collisions: {
            enable: true,
        },
        move: {
            direction: "none",
            enable: true,
            outModes: {
                default: "bounce",
            },
            random: false,
            speed: 2,
            straight: false,
        },
        number: {
            density: {
                enable: true,
                area: 800,
            },
            value: 80,
        },
        opacity: {
            value: 0.5,
        },
        shape: {
            type: "circle",
        },
        size: {
            value: { min: 1, max: 5 },
        },
    },
    detectRetina: true,
})
const particlesInit = async (engine: any) => {
    // await loadFull(engine)
    await loadSlim(engine)
}

const particlesLoaded = async (container: any) => {
    // console.log("Particles container loaded", container)
}
</script>

<style scoped lang="scss">
.login-container {
    height: 100%;
    background: var(--el-color-white);
    .login-left {
        flex: 1;
        position: relative;
        background-color: rgba(211, 239, 255, 1);
        margin-right: 100px;
        .login-left-logo {
            display: flex;
            align-items: center;
            position: absolute;
            top: 50px;
            left: 80px;
            z-index: 1;
            animation: logoAnimation 0.3s ease;
            img {
                width: 52px;
                height: 52px;
            }
            .login-left-logo-text {
                display: flex;
                flex-direction: column;
                span {
                    margin-left: 10px;
                    font-size: 28px;
                    color: #26a59a;
                }
                .login-left-logo-text-msg {
                    font-size: 12px;
                    color: #32a99e;
                }
            }
        }
        .login-left-img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 52%;
            img {
                width: 100%;
                height: 100%;
                animation: error-num 0.6s ease;
            }
        }
        .login-left-waves {
            position: absolute;
            top: 0;
            right: -100px;
        }
    }
    .login-right {
        width: 700px;
        .login-right-warp {
            border: 1px solid var(--el-color-primary-light-3);
            border-radius: 3px;
            width: 500px;
            height: 500px;
            position: relative;
            overflow: hidden;
            background-color: var(--el-color-white);
            .login-right-warp-one,
            .login-right-warp-two {
                position: absolute;
                display: block;
                width: inherit;
                height: inherit;
                &::before,
                &::after {
                    content: "";
                    position: absolute;
                    z-index: 1;
                }
            }
            .login-right-warp-one {
                &::before {
                    filter: hue-rotate(0deg);
                    top: 0px;
                    left: 0;
                    width: 100%;
                    height: 3px;
                    background: linear-gradient(90deg, transparent, var(--el-color-primary));
                    animation: loginLeft 3s linear infinite;
                }
                &::after {
                    filter: hue-rotate(60deg);
                    top: -100%;
                    right: 2px;
                    width: 3px;
                    height: 100%;
                    background: linear-gradient(180deg, transparent, var(--el-color-primary));
                    animation: loginTop 3s linear infinite;
                    animation-delay: 0.7s;
                }
            }
            .login-right-warp-two {
                &::before {
                    filter: hue-rotate(120deg);
                    bottom: 2px;
                    right: -100%;
                    width: 100%;
                    height: 3px;
                    background: linear-gradient(270deg, transparent, var(--el-color-primary));
                    animation: loginRight 3s linear infinite;
                    animation-delay: 1.4s;
                }
                &::after {
                    filter: hue-rotate(300deg);
                    bottom: -100%;
                    left: 0px;
                    width: 3px;
                    height: 100%;
                    background: linear-gradient(360deg, transparent, var(--el-color-primary));
                    animation: loginBottom 3s linear infinite;
                    animation-delay: 2.1s;
                }
            }
            .login-right-warp-mian {
                display: flex;
                flex-direction: column;
                height: 100%;
                .login-right-warp-main-title {
                    z-index: 999;
                    color: #fff;
                    height: 130px;
                    line-height: 130px;
                    font-size: 27px;
                    text-align: center;
                    letter-spacing: 3px;
                    animation: logoAnimation 0.3s ease;
                    animation-delay: 0.3s;
                    // color: var(--el-text-color-primary);
                }
                .login-right-warp-main-form {
                    z-index: 999;
                    flex: 1;
                    padding: 0 50px 50px;
                    .login-content-main-sacn {
                        position: absolute;
                        top: 0;
                        right: 0;
                        width: 50px;
                        height: 50px;
                        overflow: hidden;
                        cursor: pointer;
                        transition: all ease 0.3s;
                        color: var(--el-color-primary);
                        &-delta {
                            position: absolute;
                            width: 35px;
                            height: 70px;
                            z-index: 2;
                            top: 2px;
                            right: 21px;
                            background: var(--el-color-white);
                            transform: rotate(-45deg);
                        }
                        &:hover {
                            opacity: 1;
                            transition: all ease 0.3s;
                            color: var(--el-color-primary) !important;
                        }
                        i {
                            width: 47px;
                            height: 50px;
                            display: inline-block;
                            font-size: 48px;
                            position: absolute;
                            right: 1px;
                            top: 0px;
                        }
                    }
                }
            }
        }
    }
}
:deep(.el-tabs__item) {
    color: #fff;
}
</style>
